<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./request/requset.js"></script>
  <script src="./request/tanchu.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .head {
      width: 800px;
      height: 50px;
      border: 1px solid gray;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }

    .bigbox button {
      background-color: #1890ff;
      border: 0;
      width: 50px;
      height: 30px;
      color: white;
      border-radius: 5px;
    }

    tbody td button {
      margin-left: 10px;
    }

    table {
      width: 800px;
      text-align: center;
    }

    .nan,
    .dis {
      box-sizing: border-box;
      font-size: 12px;
      color: red;
      border: 1px solid red;
      border-radius: 5px;
      padding: 3px;
      background-color: rgba(255, 0, 0, 0.1);
    }

    .nv,
    .avail {
      box-sizing: border-box;
      font-size: 12px;
      color: green;
      border: 1px solid green;
      border-radius: 5px;
      padding: 3px;
      background-color: rgba(0, 128, 0, 0.1);
    }



    /* 修改页面 */
    .pop {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .pop>div {
      width: 500px;
      height: 300px;
      background-color: white;
      display: flex;
      flex-direction: column;
    }

    .pop>div .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      height: 30px;
      border-bottom: 1px solid gray;
    }

    .pop>div .header button {
      background-color: white;
      border: 0;
      width: 30px;
      height: 30px;
      font-size: 20px;
    }

    .pop .input {
      display: flex;
      flex-direction: column;
      padding: 10px;
    }

    .pop .input>input {
      height: 25px;
    }

    .pop .button {
      display: flex;
      justify-content: right;
      padding: 10px;
    }

    .pop .button .false,
    .pop .button .true {
      width: 50px;
      height: 30px;
      margin-left: 10px;
    }

    .pop .button .true {
      color: white;
      background-color: #409eff;
      border: 0;
    }

    .change {
      display: none;
    }

    .add {
      display: none;
    }

    td p {
      text-align: center;
      width: 50px;
      height: 25px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="bigbox">
    <div class="head">
      <h3>用户列表</h3>
      <button class="addBtn">添加</button>
    </div>
    <table>
      <thead>
        <tr>
          <td>序号</td>
          <td>用户名</td>
          <td>手机号</td>
          <td>邮箱</td>
          <td>性别</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>宋文轩</td>
          <td>172780659685</td>
          <td>160542043@qq.com</td>
          <td>
            <p class="nan">男</p>
          </td>
          <td>
            <p class="dis">禁用</p>
          </td>
          <td><button>编辑</button><button>删除</button></td>
        </tr>
        <tr>

      </tbody>
    </table>
  </div>


  <!-- 修改 -->
  <div class="pop change">
    <div>
      <div class="header">
        <span>修改用户</span>
        <button class="false">×</button>
      </div>
      <div class="input">
        <input type="text" name="name" placeholder="用户名"><br>
        <input type="text" name="pwd" placeholder="密码"><br>
        <input type="text" name="email" placeholder="邮箱"><br>
        <div>
          <input type="radio" value="男" name="sex">男
          <input type="radio" value="女" name="sex">女
          <input type="radio" value="保密" name="sex">保密
        </div>
        <input type="text" name="iphone" placeholder="手机号">
      </div>
      <div class="button">
        <button class="false">取消</button>
        <button class="true">确定</button>
      </div>
    </div>

  </div>

  <!-- 增加 -->
  <div class="pop add">
    <div>
      <div class="header">
        <span>添加用户</span>
        <button class="false">×</button>
      </div>
      <div class="input">
        <input type="text" name="name" placeholder="用户名"><br>
        <input type="text" name="pwd" placeholder="密码"><br>
        <input type="text" name="email" placeholder="邮箱"><br>
        <div>
          <input type="radio" value="男" name="sex" checked>男
          <input type="radio" value="女" name="sex">女
          <input type="radio" value="保密" name="sex">保密
        </div>
        <input type="text" name="iphone" placeholder="手机号">
      </div>
      <div class="button">
        <button class="false">取消</button>
        <button class="true">确定</button>
      </div>
    </div>

  </div>
</body>
<script>
  // 获取 tbody 标签
  const oTbody = document.querySelector('tbody')
  // 获取 div
  const oDiv = document.querySelector('.bigbox')
  // 获取添加弹窗
  const oAdd = document.querySelector('.add')
  // 获取编辑弹窗
  const oChange = document.querySelector('.change')
  // 定义变量存储点击的数据的索引下标
  let index

  // 定义变量存储json文件
  let arr

  setPage()
  // 渲染函数
  async function setPage() {
    const res = JSON.parse(await myPromiseAjax({
      type: 'get',
      url: '/api/getTable'
    }))
    arr = res
    console.log(res)
    let str = ``
    res.forEach((item, index) => {
      str += `
    <tr>
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.iphone}</td>
      <td>${item.email}</td>
      <td>
        <p class="${item.sex === '男' ? 'nan' : 'nv'}">${item.sex}</p>
      </td>
      <td>
        <p class="${item.state === 'true' ? 'avail' : 'dis'}">${item.state === 'true' ? '可用' : '禁用'}</p>
      </td>
      <td>
        <button index="${index}" class="changeBtn">编辑</button>
        <button index="${index}" class="delBtn">删除</button>
      </td>
    </tr>
    `
    })
    oTbody.innerHTML = str
  }

  // 给div添加点击事件
  oDiv.addEventListener('click', e => {
    // 点击添加
    if (e.target.className === 'addBtn') {
      oAdd.style.display = 'flex'
    }
    // 点击编辑
    else if (e.target.className === 'changeBtn') {
      oChange.style.display = 'flex'
      // 将对应的数据渲染到编辑页面
      index = Number(e.target.getAttribute('index'))
      oChange.querySelector('[name = name]').value = arr[index].name
      oChange.querySelector('[name = email]').value = arr[index].email
      oChange.querySelector('[name = iphone]').value = arr[index].iphone
      oChange.querySelectorAll('[name = sex').forEach(item => {
        if (item.value === arr[index].sex) {
          item.checked = true
          console.log(item.value)
          console.log(arr[index].sex)
        }
      })
    }
    // 点击删除
    else if (e.target.className === 'delBtn') {
      let m = new Modal()
      m.confirm('确定删除该信息吗?',function(){
        // 调用发送请求
        arr.splice(Number(e.target.getAttribute('index')), 1)
        sendRequest('post', '/api/setTable', arr)
        setPage()
      },function(){ })
    }
  })
  // 给增加div添加点击事件
  oAdd.addEventListener('click', e => {
    // 点击×或者取消按钮
    if (e.target.className === 'false') {
      oAdd.style.display = 'none'
      // 点击确认按钮
    } else if (e.target.className === 'true') {
      // 获取需要添加的信息
      let name = oAdd.querySelector('[name = name]').value
      let pwd = oAdd.querySelector('[name = pwd]').value
      let email = oAdd.querySelector('[name = email]').value
      let sex
      oAdd.querySelectorAll('[name = sex').forEach(item => {
        if (item.checked) {
          sex = item.value
        }
      })
      let iphone = oAdd.querySelector('[name = iphone]').value

      let obj = {
        id: arr.length === 0 ? 1 : arr[arr.length - 1].id + 1,
        name: name,
        pwd: pwd,
        iphone: iphone,
        email: email,
        sex: sex,
        state: "false"
      }
      // 调用发送请求
      arr.push(obj)
      sendRequest('post', '/api/setTable', arr)
      setPage()
      oAdd.style.display = 'none'
    }
  })

  // 给编辑div添加点击事件
  oChange.addEventListener('click', e => {
    if (e.target.className === 'false') {
      oChange.style.display = 'none'
    } else if (e.target.className === 'true') {
      // 获取需要添加的信息
      let name = oChange.querySelector('[name = name]').value
      let pwd = oChange.querySelector('[name = pwd]').value
      let email = oChange.querySelector('[name = email]').value
      let sex
      oChange.querySelectorAll('[name = sex').forEach(item => {
        if (item.checked) {
          sex = item.value
        }
      })
      let iphone = oChange.querySelector('[name = iphone]').value

      arr[index] = {
        id: arr[index].id,
        name: name,
        pwd: pwd,
        iphone: iphone,
        email: email,
        sex: sex,
        state: arr[index].state
      }
      // 调用发送请求
      sendRequest('post', '/api/setTable', arr)
      setPage()
      oChange.style.display = 'none'
    }
  })

  // 发送请求函数
  async function sendRequest(type, url, data) {
    if (type === 'get') {
      return JSON.parse(await myPromiseAjax({
        type: type,
        url: url
      }))
    } else if (type === 'post') {
      return JSON.parse(await myPromiseAjax({
        type: type,
        url: url,
        data: JSON.stringify(data)
      }))
    }

  }
</script>

</html>